<style>
    * {
        padding: 0;
        margin: 0;
    }
    .wrap {
        width: 600px;
        height: 900px;
        margin: 0 auto;
        background-color: #f5f5f5;
        float: left;
    }

    /* userInfo */
    .userInfo {
        width: 100%;
        height: 200px;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        background-color: #23c894;
    }

    .userInfo>div {
        height: 150px;
        border-radius: 10px;
        color: #fff;
    }

    .userInfo .name {
        width: 150px;
        line-height: 150px;
        font-size: 36px;
        font-weight: 600;
        text-align: center;
        background-color: skyblue;
    }

    .userInfo .other {
        width: 380px;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        font-size: 20px;
        color: #333;
        padding-left: 20px;
    }

    .userInfo .other span {
        color: #666;
    }

    .userInfo .other .zt>span {
        display: inline-block;
        padding: 0 5px;
        border-radius: 5px;
        color: #fff;
        background-color: #d87a06;
    }

    /*  userMsg */
    .userMsg {
        width: 100%;
        margin-top: 20px;
    }

    .title {
        font-size: 24px;
        color: #333;
        line-height: 30px;
        margin-left: 16px;
    }

    .userMsg .content {
        width: 94%;
        background-color: #fff;
        margin: 0 auto;
        margin-top: 20px;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        font-size: 16px;
        line-height: 24px;
        padding: 10px 0;
    }

    .userMsg .content>div {
        margin-top: 5px;
    }

    .userMsg .content>div:nth-child(1) {
        margin-top: 0;
    }

    .userMsg span {
        color: #666;
    }

    .userMsg .gender {
        display: inline-block;
        padding: 0 5px;
        background-color: skyblue;
        border-radius: 5px;
        color: #fff;
    }

    .userMsg .content .w {
        color: #ff9900;
        margin-left: 5px;
    }

    /* 凭证与跟进 */
    .messages {
        width: 100%;
        height: 320px;
        margin: 0 auto;
        margin-top: 20px;
        overflow-y: scroll;
    }

    /* 凭证 */
    .messages .pingzheng {
        width: 100%;
        height: 150px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .messages .pingzheng .img {
        width: 100px;
        height: 100px;
        display: inline-block;
        margin-left: 3%;
    }


    /* 跟进信息 */
    .genjin {
        width: 100%;
        height: 100px;
        margin-top: 20px;
    }

    .genjin .msg {
        width: 97%;
        margin-top: 10px;
        margin-left: 3%;
        border-bottom: 1px solid #c88c23;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        background-color: #fff;
    }

    .genjin .msg img {
        width: 20px;
        height: 20px;
        margin-right: 10px;
    }

    .genjin .msg>div {
        display: flex;
        margin-bottom: 10px;
        line-height: 20px;
        color: #666;
    }

    .genjin .msg>div:nth-child(1) {
        margin-top: 10px;
    }
</style>
<div class="wrap">
    <!-- userInfo -->
    <div class="userInfo">
        <div class="name"><?=$customerInfo['name']?></div>
        <div class="other">
            <div class="phone">联系电话：<span><?=$customerInfo['phone']?></span></div>
            <div class="gender">性别：<span><?=gender($customerInfo['gender'])?></span></div>
            <div class="zt">跟进状态：<span><?=getcustatus($customerInfo['status'])?></span></div>
            <div class="lp">意向楼盘：<span><?=$customerInfo['buildName']?></span></div>
        </div>
    </div>
    <!-- userMsg -->
    <div class="userMsg">
        <div class="title">基础信息</div>
        <div class="content">
            <div>报备人员：<span><?=$customerInfo['inputName']?></span></div>
            <div>跟进人员：<span><?=$customerInfo['genjinrenName']?></span></div>
            <div>跟进人联系方式：<span><?=$customerInfo['genjinrenphone']?></span></div>
            <div>录入时间：<span><?=gettimes($customerInfo['create_time'])?></span></div>
            <div>客户类别：<span><?=getcutype($customerInfo['datatype'])?></span></div>
            <div>跟进时间：<span><?=gettimes($customerInfo['visit_time'])?></span></div>
            <div>客户标签：<span><?=getcuflag($customerInfo['flagid'])?></span></div>
            <div class="zt">跟进状态：<span><?=getcustatus($customerInfo['status'])?></span></div>
            <div class="zt">订付金额：<span><?=$customerInfo['dingjin']?></span><span class="w">万元</span></div>
            <div class="zt">签约金额：<span><?=$customerInfo['qianyue']?></span><span class="w">万元</span></div>
            <div>失效备注：<span><?=$customerInfo['remark']?$customerInfo['remark']:'暂无'?></span></div>
        </div>
    </div>

    <!-- 凭证与跟进 -->
    <div class="messages">
        <!-- 到访凭证 -->
        <?php if (!empty($customerInfo['daofanginfo']['imageInfo'])): ?>
        <div class="pingzheng">
            <div class="title title1">到访凭证</div>
            <div>
                <?php  foreach ($customerInfo['daofanginfo']['imageInfo'] as $item1): ?>
                <div class="img" style="background: url('<?=$item1 ?>') no-repeat;background-size: cover;"></div>
                <?php endforeach;  ?>
            </div>
        </div>
        <?php endif; ?>
        <?php if (!empty($customerInfo['qianyueinfo']['imageInfo'])): ?>
        <div class="pingzheng">
            <div class="title title1">签约凭证</div>
            <div>
                <?php  foreach ($customerInfo['qianyueinfo']['imageInfo'] as $item1): ?>
                    <div class="img" style="background: url('<?=$item1 ?>') no-repeat;background-size: cover;"></div>
                <?php endforeach;  ?>
            </div>
        </div>
        <?php endif; ?>
        <?php if (!empty($customerInfo['yimaiinfo']['imageInfo'])): ?>
        <div class="pingzheng">
            <div class="title title1">已买凭证</div>
            <div>
                <?php  foreach ($customerInfo['yimaiinfo']['imageInfo'] as $item13): ?>
                    <div class="img" style="background: url('<?=$item13 ?>') no-repeat;background-size: cover;"></div>
                <?php endforeach;  ?>
            </div>
        </div>
        <?php endif; ?>

        <!-- 跟进信息 -->
        <div class="genjin">
            <div>
                <div class="title title1">跟进信息</div>
                <?php if (!empty($customerInfo['fol'])): ?>
                    <?php  foreach ($customerInfo['fol'] as $item131): ?>
                        <div class="msg">
                            <div>
                                <img src="https://img.aishenghuolife.cn/小程序端/2a992f6164a81da210c4877315110b0beeb0012e.png" alt="">
                                <span><?=$item131['genjinrenname'] ?></span>
                            </div>
                            <div>
                                <img src="https://img.aishenghuolife.cn/小程序端/e9817f385e47eb1c2ceb5a5f6911be41153415d4.png" alt="">
                                <span><?=$item131['content'] ?></span>
                            </div>
                            <div>
                                <img src="https://img.aishenghuolife.cn/小程序端/61eb7f03b4bb431aa8df94d961dd7caf55e6be85.png" alt="">
                                <span><?=$item131['createTime'] ?></span>
                            </div>
                        </div>
                    <?php endforeach;  ?>
                <?php endif; ?>
            </div>
        </div>
    </div>
</div>